<template>
  <div>
    <br>
    <el-button type="primary" plain @click="dialogFormVisible = true" style="position: absolute;left: 330px;top: 75px;height: 40px">添加</el-button>
    <!--添加-->
    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="图书名">
          <el-input v-model="book.name" style="width: 260px"></el-input>
        </el-form-item>

        <el-form-item label="角色类型">
          <el-select v-model="book.type" placeholder="请选择类型">
            <el-option v-for="item in typefinds" :label="item.name" :key="item.tid" :value="item.tid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材料类型">
          <el-select v-model="book.texture" placeholder="请选择类型">
            <el-option v-for="item in texturefinds" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出版社">
          <el-select v-model="book.publisher" placeholder="请选择类型">
            <el-option v-for="item in publishers" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出版社">
          <el-select v-model="book.brand" placeholder="请选择类型">
            <el-option v-for="item in brands" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作者">
          <el-select v-model="book.author" placeholder="请选择类型">
            <el-option v-for="item in authors" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出版时间">
        <el-date-picker
          v-model="book.date"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="book.price" style="width: 260px"></el-input>
        </el-form-item>

        <el-form-item label="简介">
          <el-input v-model="book.brief" style="width: 260px"></el-input>
        </el-form-item>

        <el-form-item label="资料">
          <el-input v-model="book.detail" style="width: 260px"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    <br>
    <!--查询-->
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="出版时间:">
              <span>{{ props.row.date }}</span>
            </el-form-item>
            <el-form-item label="价钱:">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="描述:">
              <span>{{ props.row.brief }}</span>
            </el-form-item>
            <el-form-item label="资料:">
              <span>{{ props.row.detail }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="编号"
        prop="id">
      </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.head" style="width: 70px;height: 50px">
        </template>
      </el-table-column>
      <el-table-column
        label="图书名称"
        prop="name">
      </el-table-column>
      <el-table-column
        label="图书类型"
        prop="types">
      </el-table-column>
      <el-table-column
        label="图书材料"
        prop="textures">
      </el-table-column>
      <el-table-column
        label="图书出版社"
        prop="publishers">
      </el-table-column>
      <el-table-column
        label="图书品牌"
        prop="brands">
      </el-table-column>
      <el-table-column
        label="图书作者"
        prop="authora">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 0">上架</span>
          <span v-if="scope.row.state == 1">下架</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="dialogFormVisible2=true;updatebook=scope.row">修改</el-button><br><br>
          <el-button
            size="mini"
            type="danger" icon="el-icon-delete"
            @click="del(scope.row)">下架</el-button><br><br>
          <el-button @click="dialogFormVisible3=true;acbid(scope.row.id)" type="primary"
                     icon="el-icon-share" size="mini">秒杀</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      layout="total,prev, pager, next"
      :page-size="pageSize"
      :total="total" @current-change="page">
    </el-pagination>
    <!--秒杀活动-->
    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible3"
      width="50%"
      :before-close="handleClose">
      <el-form :model="activityadd">
        <el-form-item label="图书名字" hidden>
          <el-input  v-model="activityadd.bid"  style="width: 400px"></el-input><br>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="activityadd.price" style="width: 400px"></el-input><br>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="activityadd.start"  value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime" style="width: 400px"
            placeholder="选择日期开始时间">
          </el-date-picker><br>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="activityadd.end" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime" style="width: 400px"
            placeholder="选择日期结束时间">
          </el-date-picker><br>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="activityadd.nums" style="width: 400px"></el-input><br><br>
        </el-form-item>
        <el-form-item label="状态" hidden>
          <el-input v-model="activityadd.status" style="width: 400px" hidden></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible3 = false;activityadds()">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改回显-->
    <el-dialog title="修改" :visible.sync="dialogFormVisible2">
      <el-form>
        <el-form-item label="姓名">
          <el-input v-model="updatebook.name" style="width: 260px"></el-input>
        </el-form-item>
        <el-form-item label="角色类型">
          <el-select v-model="updatebook.type" placeholder="请选择类型">
            <el-option v-for="item in typefinds" :label="item.name" :key="item.tid" :value="item.tid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材料类型">
          <el-select v-model="updatebook.texture" placeholder="请选择类型">
            <el-option v-for="item in texturefinds" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出版社">
          <el-select v-model="updatebook.publisher" placeholder="请选择类型">
            <el-option v-for="item in publishers" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出版社">
          <el-select v-model="updatebook.brand" placeholder="请选择类型">
            <el-option v-for="item in brands" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作者">
          <el-select v-model="updatebook.author" placeholder="请选择类型">
            <el-option v-for="item in authors" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-input v-model="updatebook.date" style="width: 260px"></el-input>
        </el-form-item>

        <el-form-item label="单价">
          <el-input v-model="updatebook.price" style="width: 260px"></el-input>
        </el-form-item>

        <el-form-item label="简介">
          <el-input v-model="updatebook.brief" style="width: 260px"></el-input>
        </el-form-item>

        <el-form-item label="资料">
          <el-input v-model="updatebook.detail" style="width: 260px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Role",

  data (){
    return {
      dialogFormVisible: false,
      dialogFormVisible2:false,
      list:[],
      book:{name:"",type:"",texture:"",publisher:"",brand:"",author:"",date:"",price:"",brief:"",detail:""},
      total: 0,
      pageSize: 6,
      tableData: [],
      typefinds:[],
      texturefinds:[],
      publishers:[],
      brands:[],
      authors:[],
      updatebook:{},
      activityadd:{bid:"",price:17,start:"",end:"",nums:133,status:0},
      bid:{id:""},
      dialogFormVisible3:false,
    }
  },
  created() {
    this.find()
    this.typefind()
    this.texturefind()
    this.publisher()
    this.brand()
    this.author()
  },
  methods: {
    find(){
      this.$http.post("/backservice/book/find?pageNum=0&pageSize=" + this.pageSize).then(response => {
        console.log(response.userList)
        this.tableData = response.userList
        this.total = response.TotalNum
      })
    },
    add() {
      this.dialogFormVisible=false
      this.$http.post("/backservice/book/add", this.book).then(add => {
        if (add>0) {
          this.find()
          alert("添加成功")
        } else {
          alert("添加失败")
        }
      })
    },
    page(currentPage) {
      this.$http.post('/backservice/book/find?&pageNum=' + (currentPage - 1) + '&pageSize=' + this.pageSize)
        .then(response => {
          this.tableData = response.userList
        })
    },
    typefind(){
      this.$http.post("/backservice/type/find").then(data=>{
        this.typefinds=data
      })
    },
    texturefind(){
      this.$http.post("/backservice/texture/find").then(data=>{
        this.texturefinds=data
      })
    },
    publisher(){
      this.$http.post("/backservice/publisher/find").then(data=>{
        this.publishers=data
      })
    },
    brand(){
      this.$http.post("/backservice/brand/find").then(data=>{
        this.brands=data
      })
    },
    author(){
      this.$http.post("/backservice/author/find").then(data=>{
        this.authors=data
      })
    },
    update(){
      this.dialogFormVisible2=false
      this.$http.post("/backservice/book/update",this.updatebook).then(data=>{
        if (data>0){
          this.find()
          alert("修改成功")
        }else {
          alert("修改失败")
        }
      })

    },
    del(row){
      this.$http.post("/backservice/book/undercarriage",{id:row.id}).then(data=>{
        if (data>0){
          this.find()
          alert("下架成功")
        }else {
          alert("下架失败")
        }
      })
    },
    acbid(bid){
      let bids=this.activityadd.bid=bid
    },
    activityadds()
    {
      this.$http.post('backservice/acivity/add',this.activityadd).then(data=>{
        if (data>0){
          this.$message({
            message: '恭喜你，这是一条成功消息',
            type: 'success'
          });
        }else {
          this.$message.error('错了哦，这是一条错误消息');
        }
      })
    }
  }

}



</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
